<template>
  <div class="my">
    <!-- 个人信息 -->
    <div class="userInfo">
      <van-image class="myImg" round fit="cover" :src="userInfo.photo" />
      <div class="msg">
        <div class="name">{{ userInfo.name }}</div>
        <div class="birth">{{ userInfo.birthday }}</div>
      </div>
    </div>
    <!-- 我的收藏 -->
    <van-grid :column-num="3">
      <van-grid-item icon="newspaper-o" text="我的作品" />
      <van-grid-item icon="star-o" text="我的收藏" />
      <van-grid-item icon="tosend" text="阅读历史" />
    </van-grid>
    <!-- 其它信息 -->
    <van-cell-group>
      <van-cell to="/edit" icon="edit" is-link title="编辑资料" />
      <van-cell icon="edit" is-link title="小智同学" />
      <van-cell icon="edit" is-link title="系统设置" />
      <van-cell @click="exit" icon="edit" is-link title="退出登录" />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // userInfo: {}
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    }
  },
  methods: {
    // 点击退出登录时触发
    exit () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确认退出吗?'
        })
        .then(() => {
          // 清除 token
          this.$store.commit('delToken')
          // 清除 userInfo
          this.$store.commit('delUserInfo')
          // 跳转回登录页面
          this.$router.push('/login')
          // 提示退出成功
          this.$toast.success('退出成功')
        })
        .catch(() => {
          console.log('取消')
        })
    }
  },
  async created () {
    // const token = this.$store.state.token.token
    // const res = await getProfileApi(token)
    // // console.log(res.data)
    // this.userInfo = res.data.data
    this.$store.dispatch('getUserInfo')
  }
}
</script>

<style lang="less">
.my {
  .userInfo {
    display: flex;
    align-items: center;
    padding-left: 20px;
    height: 120px;
    background-color: #3296fa;
    font-size: 18px;
    color: #fff;
    .myImg {
      width: 90px;
      height: 90px;
    }
    .msg {
      margin-left: 20px;
      line-height: 30px;
    }
  }
  i.van-icon.van-icon-tosend.van-grid-item__icon {
    color: #ffa814;
  }
  i.van-icon.van-icon-star-o.van-grid-item__icon {
    color: #ff262a;
  }
  i.van-icon.van-icon-newspaper-o.van-grid-item__icon {
    color: #3296fa;
  }
}
</style>
